<template>
	<view class="preview">
		<swiper circular>
			<swiper-item v-for="item in 8">
				<image @click="maskChange" src="/common/images/preview1.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="mask" v-if="maskState">
			<view class="goback"></view>
			<view class="count">3 / 9</view>
			<view class="time">10:56</view>
			<view class="date">
				<uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
			</view>
			<view class="footer">
				<view class="box" @click="info">
					<uni-icons type="info-filled" size="23"></uni-icons>
					<view>信息</view>
				</view>
				<view class="box" @click="evaluate">
					<uni-icons type="star" size="23"></uni-icons>
					<view>评分</view>
				</view>
				<view class="box">
					<uni-icons type="download" size="23"></uni-icons>
					<view>下载</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" safe-area type="bottom" border-radius="10px 10px 0 0">
			<view class="infoBox">
				<view class="popupHead">
					<view class="kong">
					</view>
					<view class="title">
						壁纸信息
					</view>
					<view class="close" @click="closeFn">
						<uni-icons type="closeempty" size="25" color="gray"></uni-icons>
					</view>

				</view>
				<scroll-view scroll-y="true">
					<view class="content">
						<view class="row">
							<view class="label">
								壁纸ID:
							</view>
							<text class="value">65434beaa09a9b1c28e28227</text>
						</view>
						<view class="row">
							<view class="label">
								发布者:
							</view>
							<text class="value">小丸子O</text>
						</view>
						<view class="row">
							<view class="label">
								评分:
							</view>
							<view class="value" style="display: flex;">
								<uni-rate readonly :touchable="false" :value="5" />
								<text>5分</text>
							</view>
						</view>
						<view class="row">
							<view class="label">
								摘要:
							</view>
							<text class="value">NBA再次贡献世界名画，文班亚马封盖杜兰特名场面。图源:微博</text>
						</view>
						<view class="row">
							<view class="label">
								标签:
							</view>
							<view class="tags">
								<view class="tagItem">
									标签1
								</view>
								<view class="tagItem">
									标签1
								</view>
								<view class="tagItem">
									标签1
								</view>
								<view class="tagItem">
									标签1
								</view>
								<view class="tagItem">
									标签1
								</view>
								<view class="tagItem">
									标签1
								</view>
								<view class="tagItem">
									标签1
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<view class="notice">
				声明:本图片来用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱513894357@qq.com，管理将删除侵权壁纸，维护您的权益。
			</view>

		</uni-popup>
		<!-- //评分 -->
		<uni-popup ref="score" background-color="#fff" border-radius="10px" :is-mask-click="false">
			<view class="scoreContent">
				<view class="popupHead">
					<view class="kong">
					</view>
					<view class="title" style="padding-left: 50rpx;">
						壁纸评分
					</view>
					<view class="close" @click="closeScoreFn">
						<uni-icons  type="closeempty" size="25" color="gray"></uni-icons>
					</view>

				</view>

				<view class="scoreStar">
				
					<uni-rate  v-model="userStar"allowHalf  @change="onChange" />
					<text style="margin-left: 10rpx;color: #28b389;">{{userStar}}分</text>
				</view>
				<view class="footer">
					<button  :disabled="!userStar" type="default" plain size="mini" @click="scoreBtn">确认评分</button>

				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	const maskState = ref(true)
	const maskChange = () => {
		maskState.value = !maskState.value
	}
	const showInfo = ref(false)
	const popup = ref(null)
	const score = ref(null)
	const info = () => {
		popup.value.open()
	}
	const closeFn = () => {
		popup.value.close()
	}
	//评分
	const userStar = ref(0)
	const evaluate = () => {
		score.value.open()
	}
	const closeScoreFn = () => {
		score.value.close()
	}
	const onChange = (e) => {
		console.log( "hah");
		userStar.value = e.value
	}
	// 点击确定评分
	const scoreBtn =()=>{
		score.value.close()
	}
</script>

<style lang="scss" scoped>
	.preview {
		position: relative;
		width: 100%;
		height: 100vh;

		swiper {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mask {

			// position: absolute;
			// left: 0;
			// top: 0;
			// width: 100%;
			// height: 100%;
			.goback {}

			.count {
				position: absolute;
				width: fit-content;
				text-align: center;
				line-height: 40rpx;
				border-radius: 40rpx;
				top: 10vh;
				left: 50%;
				transform: translateX(-50%);
				color: #fff;
				padding: 8rpx 28rpx;
				background: gray;
				backdrop-filter: blur(10rpx);

			}

			.time {
				position: absolute;
				top: calc(10vh + 80rpx);
				color: #fff;
				left: 50%;
				font-size: 140rpx;
				transform: translateX(-50%);
				font-weight: 120;
				text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);

			}

			.date {
				position: absolute;
				top: calc(10vh + 240rpx);
				left: 50%;
				transform: translateX(-50%);
				color: #fff;
				text-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
			}

			.footer {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 60vw;
				height: 120rpx;
				border-radius: 120rpx;
				color: #000;
				background: rgba(225, 225, 225, 0.8);
				bottom: 10vh;
				display: flex;
				justify-content: space-around;
				align-items: center;
				box-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(20rpx);

				.box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 2rpx 12rpx;

					.text {
						font-size: 26rpx;
						color: #676767;

					}


				}
			}
		}

		.infoBox {
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;



			scroll-view {
				max-height: 60vh;

				.content .row {
					display: flex;
					padding: 16rpx 0;
					font-size: 32rpx;
					line-height: 1.7em;

					.label {
						color: #a7a7a7;
						width: 140rpx;
						text-align: right;
						font-size: 30rpx;
						margin-right: 10rpx;
						flex-shrink: 0;

						/* 防止收缩 */
						.value {
							flex: 1;
							width: 0;
						}
					}

					.tags {
						display: flex;
						flex-wrap: wrap;

						.tagItem {
							color: #28b389;
							height: 50rpx;
							line-height: 50rpx;
							border-radius: 40rpx;
							padding: 0 10rpx;
							border: 1px solid #28b389;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
						}
					}
				}

			}

		}

		.notice {
			margin: 30rpx;
			line-height: 40rpx;
			padding: 30rpx 20rpx;
			color: #747474;
			background-color: #f6f6f6;
		}

		.popupHead {
			width: 100%;
			height: 115rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;

			.close {
				padding: 5rpx
			}
		}

		.scoreContent {
			width: 70vw;
			background-color: #fff;
			padding:30rpx;
			border-radius: 30rpx;			
			.scoreStar{
				display: flex;
				justify-content: center;
			}
			.footer{
				margin: 0 auto;
				margin-top: 30rpx;
				text-align: center;
			}
			
		}
		


	}
</style>